<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container w-full lg:w-2/3">
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      class="block lg:hidden"
      @select="handleIndexChange"
    >
      <el-menu-item :index="defaultName" :key="defaultName">
        <span slot="title">{{ defaultName }}</span>
      </el-menu-item>
      <el-menu-item
        :index="item.name"
        :key="item.name"
        v-for="item in publishers"
      >
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
    <el-row class="mt-4">
      <el-col :xs="0" :sm="3">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @select="handleIndexChange"
        >
          <el-menu-item :index="defaultName" :key="defaultName">
            <span slot="title">{{ defaultName }}</span>
          </el-menu-item>
          <el-menu-item
            :index="item.name"
            :key="item.name"
            v-for="item in publishers"
          >
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :xs="22" :sm="20">
        <div class="flex flex-row ml-8">
          <blog-list
            v-if="loading"
            :index="activeIndex"
            :keyword="searchKeyword"
            :mode="queryMode"
          ></blog-list>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { aggr } from "@/api/article";
import BlogList from "./BlogList.vue";

export default {
  name: "InfoBase",
  components: {
    BlogList,
  },
  data() {
    return {
      queryMode: "text",
      defaultName: "最新",
      activeIndex: "",
      publishers: [],
      keyword: "",
      searchKeyword: "",
      loading: false,
    };
  },
  mounted() {
    this.fetchAggr();
  },
  methods: {
    fetchAggr() {
      aggr().then((res) => {
        this.publishers = res.data;
        this.activeIndex = this.defaultName;
        this.handleSearch();
      });
    },
    handleIndexChange(index) {
      this.activeIndex = index;
      this.handleSearch();
    },
    handleSearch() {
      this.$store.dispatch(
        "setSearchLabel",
        this.activeIndex === this.defaultName ? "" : this.activeIndex
      );
      this.loading = false;
      this.$nextTick(() => {
        this.loading = true;
      });
    },
  },
};
</script>